<PowerSelectMultiple
  data-test-people-select
  {{on "click" this.onClick}}
  @searchEnabled={{true}}
  @search={{perform this.searchDirectory}}
  @searchField="email"
  @options={{this.options}}
  @selected={{@selected}}
  @renderInPlace={{@renderInPlace}}
  @placeholder="Search by name or email..."
  @onChange={{@onChange}}
  @onInput={{this.onInput}}
  @onClose={{this.onClose}}
  @onFocus={{this.onFocus}}
  @onOpen={{this.maybeClose}}
  @triggerId={{@triggerId}}
  @onKeydown={{this.onKeydown}}
  @disabled={{@disabled}}
  @selectedItemComponent={{component "multiselect/user-email-image-chip"}}
  @calculatePosition={{this.calculatePosition}}
  @loadingMessage="Loading..."
  @eventType="click"
  class="hds-form-field__control multiselect w-full
    {{if (and @isSingleSelect @selected.length) 'selection-made'}}"
  ...attributes
  as |option|
>
  <div class="flex items-center gap-2 overflow-hidden py-1">
    <Person::Avatar @email={{option}} />
    <div class="w-full min-w-0">
      <TruncatedText
        class="text-body-200 leading-tight text-color-foreground-primary"
      >
        {{get-model-attr "person.name" option fallback="group.name"}}
        <span class="ml-0.5 text-body-100 text-color-foreground-disabled">
          {{option}}
        </span>
      </TruncatedText>
    </div>
  </div>
</PowerSelectMultiple>
